<template>
	<view :style="[AppSkinVar]">
		<e-loading-page :loading="loading"  >
			<template #icon>
				<loader ></loader>
			</template>
		</e-loading-page>
		<order-header :info="orderStatus"></order-header>
		<yuncangGoodsCard
		class="u-m-t-20"
			:priceShow="true"
			:isJump="true"
			:goods="info"
			:goodsId="info.repertoryId"
			:goodsKeys="{
				image: 'commodityPhoto',
				price: 'commodityPrice',
				name: 'commodityName',
				qty: 'commodityQty'
			}"
		></yuncangGoodsCard>
		<contact-view customClass="shadow-f3 bg-white e-p-24 e-flex-xy-center" @tapContact="handleTapContactIcon" v-if="SHOW_KEFU">
			<text class="iconfont icon-dingdanxiangqingkefuicon e-font-36 c-primary e-p-r-22"></text>
			<text class="e-font-30">{{ $t('store.联系客服') }}</text>
		</contact-view>
		
		
		<order-info class="u-m-t-20" :info="info"></order-info>
		<view class="order-button bg-white">
			<order-button
				:info="info"
				:isDetail="true"
				@cancel="$u.throttle(cancelOrder, 1000)"
				@pay="payShow = true"
			></order-button>
			<view class="ios-btm"></view>
		</view>

		<view style="height: 120rpx;"></view>
		<pay-popup :show="payShow" @close="payShow = false" @pay="pay"></pay-popup>
	</view>
</template>

<script>
import { getYuncangOrderDetail,getPayResult,postYuncangCancelOrder,postYuncangOrderRepayments} from 'api/yuncang.js'
	import {
		getStoreUserThirdId
	} from 'common/request/api/IM'
import orderHeader from '../child/order-header.vue'
import orderInfo from '../child/order-info.vue'
import orderButton from '../child/order-button.vue'
// 支付mixin
import payMixIn from 'common/mixin/payMixIn.js'
import yuncangGoodsCard from '../../child/yuncang-goods-card.vue'
import { MPAPP_CONTACT } from "@/env"
export default {
	mixins: [payMixIn],
	components: {
		orderHeader,
		orderInfo,
		orderButton,
		yuncangGoodsCard
	},
	data() {
		return {
			loading: false,
			orderId: null,
			info: {
				deputys:[]
			},
			orderStatus: {
				title: '',
				icon: '1'
			},
			orderStatusMap: [
				{
					title: '等待买家付款',
					subTitle: '请尽快付款',
					icon: '1'
				},
				{
					title: '已付款',
					subTitle: '订单已完成支付',
					icon: '2'
				}
			],
			payShow: false,
			MPAPP_CONTACT
		}
	},
	onLoad(opt) {
		this.orderId = opt.id
		// #ifdef HTML5 || PREVIEW
		this.getH5PayResult('order/success', 'payOrderId', getPayResult)
		// #endif
	},
	onShow() {
		this.loading = true
		getOrderDetail(this.orderId).then(res => {
			this.loading = false
			if (res.code == 200) {
				this.info = res.data
				this.orderStatus = this.orderStatusMap[res.data.state]
			}
		})
	},
	methods: {
		// 取消订单
		cancelOrder() {
			this.$showModal({
				content: this.$t('yuncang.确定要取消订单吗'),
				success: res => {
					if (res.confirm) {
						this.loading = true
						postCancelOrder(this.info.paycode).then(resultRes => {
							this.loading = false
							if (resultRes.code === 200) {
								uni.redirectTo({
									url: `/pages/yuncang/order/success?type=0`
								})
							}
						})
					}
				}
			})
		},
		// 立即付款
		pay(payId, password = null, isDefault = 'Y',payType) {
			let data = {
				payId,
				fromType: getApp().globalData.payFromType,
				paycode:this.info.paycode
			}
			password && (data['payword'] = password)
			this.requestPay({
				api:postOrderRepayments,
				params:[data],
				isDefault,
				successUrl: id => `yuncang/order/success?type=4&id=${id}`,
				errorUrl:msg => `yuncang/order/error?msg=${msg}`,
				storageKey: 'yuncangPayOrderId',
				payResultApi: getPayResult,
				orderUrl:'yuncang/order/index',
				payType,
				isShowMsg:true
			})
		},
		handleTapContact() {
			getStoreUserThirdId({
				userThirdId: this.info.storeId
			}).then(res => {
				this.$goTo('/pages/public/msg/detail', {
					user: res.data.chatlinkid,
					bId: res.data.chat.bizid,
					sId: this.info.storeId,
					name: res.data.chat.name
				})
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.shadow-f3 {
	box-shadow: 0px -2rpx 0px 0px #f3f3f3;
}

.order-button {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
}
</style>
